<script lang="ts" setup>
interface Props {
  width?: string;
  minWidth?: number;
  align?: 'center' | 'left' | 'right';
  prop?: string;
}
const props = withDefaults(defineProps<Props>(), {
  minWidth: 200,
  align: 'left'
});
const getRowData = (row: object) => {
  if (props.prop) {
    const prop = props.prop;
    const res: string[] = prop.split('.');
    switch (res.length) {
      case 1:
        return row[res[0]];
      case 2:
        return row[res[0]][res[1]];
      case 3:
        return row[res[0]][res[1]][res[2]];
      case 4:
        return row[res[0]][res[1]][res[2]][res[3]];
      case 5:
        return row[res[0]][res[1]][res[2]][res[3]][res[4]];
      case 6:
        return row[res[0]][res[1]][res[2]][res[3]][res[4]][res[5]];
      default:
        break;
    }
  }
};
</script>
<template>
  <el-table-column v-bind="$attrs" :width :min-width :align :prop>
    <template #default="{ row }" v-if="prop">{{ getRowData(row) }}</template>
    <template #default="{ row }" v-else> <slot :row="row" /> </template>
  </el-table-column>
</template>
<style lang="scss" scoped></style>
